<!DOCTYPE html>
<html>
<head>
<style> 
.trtion{
	width:100px;
	height:100px;
	background:yellow;
	transition:width 2s;
	-moz-transition:width 2s; /* Firefox 4 */
	/*如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：*/
	-webkit-transition:width 2s,height 2s ,background 2s; /* Safari and Chrome */
	-o-transition:width 2s; /* Opera */
}

.trtion:hover{
	width:500px;
	height: 300px;
	background: blue;
}
</style>
</head>
<body>

<div class="trtion"></div>
<p>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</p>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>
